<template>
        <el-dialog
            :title="$t('mpTsp0YfzFOlLz8DpYlZ')"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('wmd4Ixon01TmSHk82nKh')" prop="n_Sort">
                            <el-input type="number" v-model="ruleForm.n_Sort" :placeholder="$t('wmd4Ixon01TmSHk82nKh')" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备别称" prop="v_AliasName">
                            <el-input v-model="ruleForm.v_AliasName" placeholder="设备别称" clearable />
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('ztu0TpvwBrwVxA1Hahd4A')" prop="v_Name">
                            <el-input v-model="ruleForm.v_Name" :placeholder="$t('ztu0TpvwBrwVxA1Hahd4A')" clearable />
                        </el-form-item>
                    </el-col> -->
                    
                    <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('liRos24Dz6C9xVjHwNx')" prop="v_Region">
                            <el-input v-model="ruleForm.v_Region" :placeholder="$t('liRos24Dz6C9xVjHwNx')" clearable />
                        </el-form-item>
                    </el-col> -->
                    
                    

                    <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label="$t('cDlGh0fS7WejUuf1Cw5cC')" prop="v_MediaUrl">
                            <el-input type="textarea" v-model="ruleForm.v_MediaUrl" :placeholder="$t('cDlGh0fS7WejUuf1Cw5cC')" clearable />
                        </el-form-item>
                    </el-col> -->

                    <!-- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item :label="$t('cDlGh0fS7WejUuf1Cw5cD')" prop="v_RealMediaUrl">
                            <el-input type="textarea" v-model="ruleForm.v_RealMediaUrl" :placeholder="$t('cDlGh0fS7WejUuf1Cw5cC')" clearable />
                        </el-form-item>
                    </el-col> -->

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('uDJY2uHey5cDkM2Yhp2w')">
                            <el-input type="textarea" v-model="ruleForm.v_Remark" :placeholder="$t('uDJY2uHey5cDkM2Yhp2w')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
               <el-button @click="handleClose" >{{ $t('bg0dCh9NzdUyGoIvsnNRl') }}</el-button>
                <el-button :disabled="repeatDis" @click="submitForm(ruleFormRef)" type="primary">{{ $t('ljWCcNnwiuLtut076mHBn') }}</el-button>
                 
            </template>
        </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, toRaw, onMounted } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { CameraUpdate, CameraDetail } from '/@/api/its/camera'

export default defineComponent( {
    name: 'edit-camera-equipment',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object ,
            default: null,
        }
    },
    setup(props,ctx){
        const ruleFormRef = ref()
        /*** state 引用接口定义基础数据初始值 */
        const state = reactive({
            repeatDis: false,
            ruleForm: {
                // v_Name: props.item.v_Name || '',
                // v_BrandName: '',
                // v_Region: '',
                // v_MediaUrl: '',
                // v_RealMediaUrl: '',

                n_Id: props.item.n_Id || 0,
                v_AliasName:'',
                n_Sort: 1,
                v_Remark: '',
            }
        })

        /*** 基础验证 rules */
        const rules = reactive ({
            /*** 放置验证 */
            // 设备名称
            v_AliasName: [
				{ required: true, message: window.$t('ee91KfEg7kpUrcDnVpgK'), trigger: 'blur' },
			],
            // // 品牌名称
            // v_BrandName: [
			// 	{ required: true, message: window.$t('eCuWkElgvtLoDhQ1BkN3y'), trigger: 'blur' },
			// ],
            // // 监控区域
            // v_Region: [
			// 	{ required: true, message: window.$t('hXppYddwWrDfs9m7eBsNu'), trigger: 'blur' },
			// ],
            // 序号
            n_Sort: [
				{ required: true, message: window.$t('faLfLc6rDuBo2P3nFyph'), trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ruleFormRef.value.resetFields()
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true
                    // debugger
                    let param = toRaw(state.ruleForm)
                    let res: any = null
                    try {
                        res = await CameraUpdate(param)
                    }finally {
                        state.repeatDis = false
                    }
                    
                    if(res.success){
                        ctx.emit('close','success')
                        ctx.emit('updateData')
                    }
                }else{
                    console.log('error submit!')
                }
            })
        }

        //获取详情
        const getDetail = async () => {
            try {
                let res = await CameraDetail({id: props.item.n_Id})
                if (res && res.data) {
                    state.ruleForm = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            submitForm,
            ruleFormRef,
            ...toRefs(state),
            rules,
        }
    },
} )
</script>
<style scoped lang="scss">
#edit-camera-equipment{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>